<script lang="ts" setup>
// @ts-ignore
import {getMindfulComments} from "~/server/comment.service";

const commentsList = ref([] as any)

function getComments() {
    getMindfulComments().then(({data}: any) => {
        commentsList.value = data.data
    })
}

onMounted(() => {
    getComments()
})
</script>

<template>
    <section class="flex comments fade-before fade-after">
        <h5 class="part-title">走心评论</h5>
        <ul class="flex-ul flow-ul no-scrollbar">
            <template v-for="item in commentsList" :key="item.id">
                <a href="#" class="box fade-before fade-after">
                    <!--author-->
                    <div class="author">
                        <img :src="item.avatar"
                             class="avatar photo loaded"
                             :alt="item.nickname"
                        @error="handleErrorFriendAvatar($event,String(item.nickname).charAt(0),'2670e8')">
                        <div class="comment-info">
                            <h6>{{ item.nickname }}</h6>
                            <time class="font-small">{{ timeAgo(new Date(item.createTime)) }}</time>
                        </div>
                    </div>
                    <!--comment-text-->
                    <div class="comment-text">
                        <span class="content">{{ item.commentContent }}</span>
                        <span class="post font-small line-clamp">
                            寒烟志的第「{{ item.id }}」号走心评论
                        </span>
                    </div>
                </a>
            </template>
        </ul>
        <nav class="part-btn">
            <div class="btn comments-btn">
                <button class="prev" @click="addScrollEventPrev('.comments', 'a')"></button>
                <button class="next" @click="addScrollEventNext('.comments', 'a')"></button>
            </div>
            <div class="btn more">
                <a href="/board/" role="button"><span>留下温度不虚此行</span></a>
                <a class="add" href="/friends/" role="button"><span>添加友联与我同行</span></a>
            </div>
        </nav>
    </section>
</template>
<style scoped>
@import "@/static/css/home/home-comments.css";
</style>
